/**
 * @Description: 新增拖动抽象类
 * @author Beon
 * @date 2021/7/2
*/
import DropBox from './dropBox';
import HtmlToCanvas from '../utils/htmlToCanvas';
import {revealType} from '../types/base';
import DropControl from '../utils/dropControl';
import DomCreate from '../utils/domCreate';
import {BaseContainer} from '../structure/containerStruct';
import {BaseWidget} from '../structure/widgetStruct';

export type DropBoxProps = any

export default abstract class RevealList extends DropBox{
	// 拖动类型
	revealType: revealType
	// 构造dom（外部传入）
	initData: () => DropBoxProps

	protected constructor(props: DropBoxProps) {
	    super(props);
	    this.revealType = props.revealType;
	    this.initData = props.initData;
	    this.$el.style.userSelect = 'none';
	}

	/**
	 * 注册拖动开始事件
	 */
	mouseDownReg(): void {
	    this.$el.addEventListener('mousedown', this.beforeDropBind);
	}

	/**
	 * 拖动前事件
	 * @param e
	 * @returns {Promise<void>}
	 */
	async beforeDropDeal(e: MouseEvent): Promise<void> {
	    await HtmlToCanvas.createCanvas(this.$el, e);
	}

	/**
	 * 拖动时事件
	 * @param e
	 */
	dropMoveDeal(e: MouseEvent): void {
	    HtmlToCanvas.moveCanvas(e);
	    DropControl.dropMove(e);
	}

	/**
	 * 拖动后事件
	 * @param e
	 * @returns {Promise<void>}
	 */
	async dropOverDeal(e: MouseEvent): Promise<void> {
	    HtmlToCanvas.stopCanvas(e);

	    // 构造新的子类
	    const props = await this.createNewData();
	    const newDropBoxObj = props.revealType === revealType.Container ? new BaseContainer(props) : new BaseWidget(props);

	    await DropControl.setDropBox(newDropBoxObj, e);
	}

	/**
	 * 构建新的画布内容
	 * @returns {Promise<any>}
	 */
	async createNewData(): Promise<any>{
	    const initObj = await this.initData();
	    initObj.element = DomCreate.createDropBoxDom(initObj.element);
	    return Object.assign({
		    revealType: this.revealType
	    }, initObj);
	}
}
